<template>
	<div class="cont">
		<ul class="tit">
			<li class="" v-for="(item,index) in menuData" :class='{checked: navIndex == index}' @click='navIndex = index' :key='index'>{{item}}</li>
		</ul>
		<div class="business" v-if="navIndex == 2">
			<div class="nr">
				<dl>
					<dt>
						<span v-for='(v,i) of list' :key='i'>{{v}}</span>
					</dt>
					<dd v-for='(v,k, i) in initData' :key='i'>
						<span>{{i+1}}</span>
						<span v-for='(val,key, index) in v' :key='index'>
							<span v-if="key.indexOf('price') !== -1">{{val | toFixed}}</span>
							<span v-else>{{val}}</span>

						</span>
					</dd>
				</dl>
			</div>
		</div>
		<div class="posLoad" v-show="loadShow">正在加载...</div>
		<iframe class="iframe" @load='loadEv' frameborder="no" border="0" v-if="navIndex == 1" :src="`http://js.hscep.top/txljsuser/nets_gl.php?username=${username}&action=query`"></iframe>
		<new-vip v-if="navIndex == 0"></new-vip>
	</div>
</template>
<script>
import { bouns } from '../../config/getData'
import NewVip from './newVip'
import { mapState } from 'vuex'

export default {
	data() {
		return {
			navIndex:0,
			menuData:['注册新会员','接点图谱' ,'奖金明细'],
			list:['序号','智能合约','挖矿算力','分享算力','总计','结算时间'],
			initData:[],
			src:'',
			loadShow: false
		}
	},
	watch: {
		navIndex(val){
			if( val == 1){
				this.loadShow = true
			}else{
				this.loadShow = false
			}
		}
	},
	filters: {
		toFixed(str){
			return str.toFixed(2)
		}
	},
	computed:{
		...mapState([
			'userInfo'
		]),
		username(){
			return this.userInfo['username']
		}

	},
	methods:{
		loadEv(){
			this.loadShow = false
		},
		getData() {
			let arr = []
			bouns('bonus')
			.then(res => {
				this.initData = res.data
			})
		}
	},
	mounted() {
		this.getData()
	},
	components:{
		NewVip
	}
}
</script>


<style lang="scss" scoped>
@import "../../assets/css/all";
.business{padding-bottom: 80px;}
.iframe{width:100%;height: 90%;}

.posLoad{
	position: fixed;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	background-color: rgba(0,0,0,.7);
	color:white;
	line-height: 50px;
	width:100px;
	text-align: center;
	border-radius: 4px;
}
.cont{@include screen;}
	.jz {
		display: block;
		background-color: #fff;
		border: none;
		outline-style: none;
		color: #555454;
		margin: 10px auto;
	}
	.tit {
		background-color: #fff;
		display: flex;
		li {
			flex: 1;
			text-align: center;
			line-height: 40px;
			font-size: 16px;
		}
		.checked {
			color: #f60;
			border-bottom: 1px solid #f60;
		}
	}
	.nr {
		background-color: #fff;
		margin-top: 10px;
		dl {
			color: #555454;
			dt {
				display: flex;
				padding: 10px 0;
				border-bottom: 1px solid #C4C7CA;
				margin-bottom: 6px;
				span {
					flex:1;
					text-align: center;
				}
			}
			dd {
				display: flex;
				padding: 4px 0;
				span {
					flex:1;
					text-align: center;
				}
			}
		}
	}
</style>
